<template>
  <div class="teacher_card">
    
    <el-card shadow="hover" class="box-card">
      <div slot="header">
        <h3 class="title">{{room.name}}</h3>
      </div>
      <div class="body">
        <div class="info">
          <span style="color: Sienna">班级:{{room.cid}}</span>
          <el-tag type="info"
                  style="float: right;"
                  size="mini">
                  {{room.total}}人
          </el-tag>
        </div>
        <el-row :gutter="1">
          <el-col :sm="12" :md="14" :lg="16">
            <img src="~@/assets/img/photos/computer_class.jpg"/>
          </el-col>
          <el-col :sm="12" :md="10" :lg="8">
            <div class="right-panel ">
              <el-button type="text" @click="dialogVisible = true">详细信息</el-button>
              <el-button :type="room.status | statusFilter(0)" 
                          @click="openThis(room.status)">{{room.status | statusFilter(1)}}</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <el-dialog
      title="详细信息"
      :visible.sync="dialogVisible"
      width="30%">
      
      <div class="dialog-container">
        <p>{{room.profile}}</p>
        <i>截止日期：{{room.endTime}}</i>
      </div>
      
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { updateRoom } from '@/api/room'
export default {
  name: 'ClassItem',
  props:{
    room:{
      type: Object,
      value: {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      query: {
        tid:null,
        rid:this.room.rid, 
        status:null,
      },
    }
  },
  computed:{
    ...mapGetters([
      'uid',
    ]),
  },
  created(){
  },
  filters: {
    statusFilter(status, index) {
      const statusMap = {
        '锁定': ['primary','开启'],
        '已开启': ['warning','已开启'],
      }
      return statusMap[status][index]
    },
  },
  created() {
    this.query.tid = this.uid
  },
  methods: {
    openThis(status){
      if(status=='已开启') this.$store.dispatch('room/activeRoom', this.room.rid).then(()=>{
        this.$router.replace('/room-list/index')//已开启
      })
      else { 
        this.resetQuery()
        this.query.status = '已开启'
        updateRoom(this.query).then(response=>{
          this.room.status = '已开启'
          this.$store.dispatch('room/activeRoom', this.room.rid).then(()=>{
            this.$router.replace('/room-list/index')//开启后跳转
          })
        }).catch(()=>{
          console.log("开启教室失败")
        })
      }
    },
    resetQuery(){
      this.query.status = null
    },
  },
}
</script>

<style lang="scss">
.teacher_card{
  .el-card{
    background-color: floralwhite;
    .el-card__header{
      padding: 9px 10px;
      border-bottom-color: #B4EEB4;
    }
    .el-card__body {
      padding: 10px;
    }
  }
}
</style>

<style lang="scss">
.teacher_card{
  margin-bottom: 32px;
  .box-card {
    .title{
      margin-top: 0px;
      margin-bottom: 0px;
      text-align: center;
      color: tomato;
    }
    .body{
      .info{
        margin-bottom: 5px;
      }
      img{
        width: 100%;  
        border-radius: 5px;
      }
      .right-panel{
        // border: 1px solid red;
        position:absolute;
        bottom:0px;right:0px;
        
        display: flex;
        flex-direction: column;
        justify-content:space-between;
        text-align: center;
      }
    }
  }
  .dialog-container{
  }
}
</style>
